<template>
  <view class="tab-component">
    <view class="left-tab-box">
      <view
        class="left-tab-item"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <text
          class="iconfont"
          v-if="item.icon && item.icon != ''"
          :class="item.icon"
        ></text>
        <text class="des" v-if="item.des && item.des != ''">{{
          item.des
        }}</text>
        <text class="title">{{ item.title }}</text>
        <text class="num-red" v-if="item.num && item.num != ''">{{
          item.num
        }}</text>
        <text class="tips" v-if="item.tips && item.tips != ''">{{
          item.tips
        }}</text>
      </view>
    </view>
    <view class="right-all" v-if="isShowRightAll">
      <text class="all-text">全部</text>
      <text class="iconfont icon-weibiaoti--10"></text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    isShowRightAll: {
      type: Boolean,
      default: true,
    },
    menuList: {
      type: Array,
      default: () => [
        { icon: "icon-31daifahuo", title: "待付款", num: 5 },
        { icon: "icon-31daishouhuo", title: "待收货", num: "" },
        { icon: "icon-31daifukuan", title: "待使用", num: "" },
        { icon: "icon-31daipingjia", title: "待评价", num: 1 },
        { icon: "icon-tuikuantuihuo", title: "退换/售后", num: "" },
      ],
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.tab-component {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  padding-top: 20rpx;
  background: #fff;
  .left-tab-box {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    .left-tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .num-red {
        position: absolute;
        right: 28rpx;
        top: -5rpx;
        width: 24rpx;
        height: 24rpx;
        line-height: 24rpx;
        font-size: 20rpx;
        text-align: center;
        background-color: #ff0f23;
        border-radius: 50%;
        color: #fff;
      }
      .tips {
        position: absolute;
        right: 20rpx;
        top: -22rpx;
        padding: 2rpx 6rpx;
        height: 24rpx;
        line-height: 24rpx;
        font-size: 18rpx;
        text-align: center;
        background-color: #ff0f23;
        border-radius: 12rpx;
        color: #fff;
      }
      .iconfont {
        font-size: 50upx;
      }
      .title {
        margin-top: 10rpx;
        font-size: 24upx;
        font-weight: 300;
      }
    }
  }
  .right-all {
    display: flex;
    // 竖向
    flex-direction: column;
    // justify-content: center;
    border-left: 1rpx solid #eee;
    padding: 0 15rpx;
    align-items: center;
    .all-text {
      font-size: 24rpx;
      font-weight: 600;
      line-height: 50rpx;
    }
    .icon-weibiaoti--10 {
      display: block;
      margin-top: 10rpx;
      width: 22rpx;
      height: 22rpx;
      line-height: 20rpx;
      text-align: center;
      transform: rotate(180deg);
      font-size: 14rpx;
      font-weight: 700;
      border: 2rpx solid #000;
      box-sizing: border-box;
      border-radius: 50%;
    }
  }
}
</style>
